<template>
  <div class="notice-summary">
    <div class="search-form">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item prop="startTime" label="起始时间">
          <el-date-picker
            v-model="searchForm.startTime"
            value-format="yyyy-MM-dd 00:00:00"
            type="date"
            placeholder="请选择起始日期"
          />
        </el-form-item>

        <el-form-item prop="endTime" label="结束时间">
          <el-date-picker
            v-model="searchForm.endTime"
            value-format="yyyy-MM-dd 00:00:00"
            type="date"
            placeholder="请选择结束日期"
          />
        </el-form-item>

        <el-form-item>
          <el-button-group>
            <el-button type="primary" @click="search()" icon="el-icon-search">查询</el-button>
            <el-button type="default" @click="cancelSearch()" icon="el-icon-close">取消查询</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>

    <div class="notice-table">
      <el-table :data="noticeList" border v-loading="loading">
        <el-table-column align="center" type="index" label="序号" />
        <el-table-column align="center" prop="noticeTitle" label="公告标题">
          <div slot-scope="scope" class="ellipsis">{{scope.row.noticeTitle}}</div>
        </el-table-column>
        <el-table-column align="center" prop="noticeReadCount" label="通知人数" width="120" />
        <el-table-column align="center" prop="noticeYiReadCount" label="已阅读人数" width="120" />
        <el-table-column align="center" prop="noticeWeiReadCount" label="未阅读人数" width="120" />
        <el-table-column align="center" prop="createTime" label="发布时间" />
        <el-table-column align="center" label="管理">
          <template slot-scope="scope">
            <slot :row="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageIndexChange"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        startTime: null,
        endTime: null
      },
      noticeList: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      loading: false
    }
  },
  methods: {
    async search() {
      this.pageIndex = 1
      this.loading = true
      let res = await this.$http.post('/news-admin/sta/notice/list', {
        page: this.pageIndex,
        startTime: this.searchForm.startTime || '1970-01-01 00:00:00',
        endTime: this.searchForm.endTime || this.getDate() + ' 23:59:59'
      })
      this.noticeList = res.data.list
      this.totalCount = res.data.totalCount
      this.loading = false
    },
    cancelSearch() {
      this.pageIndex = 1
      this.$refs.searchForm.resetFields()
      this.loadNoticeList()
    },
    async loadNoticeList() {
      this.loading = true
      let res = await this.$http.post('/news-admin/sta/notice/list', {
        page: this.pageIndex,
        limit: this.pageSize
      })
      this.noticeList = res.data.list
      this.totalCount = res.data.totalCount
      this.loading = false
    },
    pageSizeChange(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.loadNoticeList()
    },
    pageIndexChange(val) {
      this.pageIndex = val
      this.loadNoticeList()
    },
    getDate() {
      var myDate = new Date()
      var year = myDate.getFullYear()
      var month = myDate.getMonth() + 1
      var date = myDate.getDate()
      var now = year + '-' + this.conver(month) + '-' + this.conver(date)
      return now
    },
    conver(s) {
      return s < 10 ? '0' + s : s
    }
  },
  async created() {
    this.loadNoticeList()
  }
}
</script>

<style lang="less">
.notice-summary {
  .notice-table {
    margin-top: 20px;
  }
}
</style>